<template>
  <view class="form-container">
    <view class="form-box">
      <block v-for="(item,index) in formDate" :key="item.rules.name">
        <!-- 单行文本框 -->
        <view class='line' v-if="item.type=='text' || item.type=='number' || item.type=='password'">
          <view :class="item.rules.verify.indexOf('req')!=-1 ? 'line-left' :'p-l14 line-left' ">
            <text class='colorRed' v-if="item.rules.verify.indexOf('req')!=-1">*</text>
            {{ item.label }}
          </view>
          <!-- 发送验证码 -->
          <view class="line-right send-code-box" v-if="item.rules.name=='yzm'">
            <input :type="item.type" class="input" placeholder-class="plaClass" :placeholder='item.placeholder'
                   v-model="item.rules.value" @input="inputVal(index)"></input>
            <view class="send-code" @click="sendCode()" :style="sendColor">{{ codeFont }}</view>
          </view>
          <!-- 普通输入框 -->
          <view class="line-right" v-else>
            <input :type="item.type" class="input" placeholder-class="plaClass" :placeholder='item.placeholder'
                   v-model="item.rules.value" @input="inputVal(index)"></input>
          </view>
        </view>
        <!-- 下拉选择-->
        <view class='line' v-else-if="item.type=='radio'">
          <view :class="item.rules.verify.indexOf('req')!=-1 ? 'line-left' :'p-l14 line-left' ">
            <text class='colorRed' v-if="item.rules.verify.indexOf('req')!=-1">*</text>
            {{ item.label }}
          </view>
          <view class="line-right">
            <input type="text" class="input" placeholder-class="plaClass" :placeholder='item.placeholder'
                   v-model="item.rules.value"
                   @click="selectInput(index)"></input>
            <view class="select-icon"></view>
          </view>
        </view>
        <!-- 多行文本框 -->
        <view class="textarea-box" v-else-if="item.type=='textarea'">
          <view :class="item.rules.verify.indexOf('req')!=-1 ? '' :'p-l14 ' ">
            <text class='colorRed' v-if="item.rules.verify.indexOf('req')!=-1">*</text>
            {{ item.label }}
          </view>
          <view class="line-right">
						<textarea rows="" cols="" placeholder-class="plaClass" :placeholder='item.placeholder'
                      v-model="item.rules.value" @input="inputVal(index)">
						</textarea>
          </view>
        </view>
        <!-- 上传图片 -->
        <view class="img-box" v-else-if="item.type=='image'">
          <view :class="item.rules.verify.indexOf('req')!=-1 ? 'img-label' :'p-l14 img-label' ">
            <text class='colorRed' v-if="item.rules.verify.indexOf('req')!=-1">*</text>
            {{ item.label }}
          </view>
          <view class="line-right">
            <view v-if="item.updateImg" class="update-img-box">
              <view class="update-img-box2">
                <img :src="item.rules.value" alt="" mode="aspectFill" class="update-img">
                <img src="./../static/img/delete_img.png" alt="" class="close-img" @click="deleteImg(index)">
              </view>
            </view>
            <view v-if="!item.updateImg" class="update-btn-box">
              <img src="./../static/img/update_btn.png" alt="" mode="aspectFill" @click="chooseImage(index)">
            </view>
          </view>
        </view>
      </block>
    </view>
    <view class="select-modal" v-if="show">
      <view class="select-bg" @click="cancel"></view>
      <view class="select-box" :animation="animationData">
        <view class="select-title">
          <view class="font32 color-999" @click="cancel">取消</view>
          <view class="font32 color-orange" @click="sure">确定</view>
        </view>
        <view>
          <block v-for="(item,index) in selectBox" :key="index">
            <view class="select-item" @click="selectItem(item.value,index)">{{ item.value[currentSelectLabel] }} <i
                class="select-flag"
                v-if="item.flag"></i>
            </view>
          </block>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'activeForm',
  data() {
    return {
      submitData: "",
      show: false,
      animationData: {},
      selectBox: [],
      currentSelectIndex: "",
      currentSelectValue: {},
      currentSelectValueNeed: "",//需要的数据
      currentSelectLabel: "" || "value",
      currentSelectNeed: "" || "value",
      codeFont: "获取验证码",
      wait: 60,
      isSend: false,
      sendColor: "color:#ff5b01"
    }
  },
  props: {
    formDate: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  methods: {
    //input输入框的值传给父组件
    inputVal: function (index) {
      this.$emit("input-val", JSON.stringify({
        val: this.formDate[index].rules.value,
        index: index
      }))
    },
    // 选择下拉框
    selectInput: function (index) {
      this.selectBox = [];
      this.currentSelectIndex = "";
      this.currentSelectValue = "";
      this.currentSelectValueNeed = "";
      this.currentSelectLabel = this.formDate[index].rules.label;
      this.currentSelectNeed = this.formDate[index].rules.need;
      this.currentSelectIndex = index;
      for (var i = 0; i < this.formDate[index].selectVal.length; i++) {
        var selectVal = {
          value: this.formDate[index].selectVal[i],
          flag: false
        }
        for (const selectValElementKey in this.formDate[index].selectVal[i]) {
          selectVal[selectValElementKey] = this.formDate[index].selectVal[i][selectValElementKey]
        }

        if (this.formDate[index].selectVal[i] === this.formDate[index].rules.value) { //判断上次选中的那个
          selectVal.flag = true;
        }
        this.selectBox.push(selectVal)
      }
      this.show = true;
      var animation = uni.createAnimation({
        duration: 300,
        timingFunction: 'ease',
      })
      this.animation = animation;
      animation.bottom("0").step()
      this.animationData = this.animation.export()
      this.$emit("select-input-btn", index);
    },
    // 上传图片
    chooseImage: function (index) {
      var that = this;
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album'],
        success: (res) => {
          this.$emit("choose-image-btn", JSON.stringify(
              {
                value: res.tempFilePaths[0],
                index: index,
              }
          ))
        },
        fail: (err) => {
          console.log('chooseImage fail', err)
        }

      })
    },
    // 删除图片
    deleteImg: function (index) {
      this.$emit("delete-img-btn", index)
    },
    // 取消
    cancel: function () {
      var that = this;
      var animation = uni.createAnimation({
        duration: 300,
        timingFunction: 'ease',
      })
      this.animation = animation;
      animation.bottom("-1000upx").step()
      this.animationData = this.animation.export()
      setTimeout(function () {
        that.show = false;
      }, 200)
    },
    // 确定
    sure: function () {
      this.$emit("sure-btn", JSON.stringify({
        currentSelectIndex: this.currentSelectIndex,
        currentSelectValue: this.currentSelectValue,
        currentSelectValueNeed: this.currentSelectValueNeed
      }))
      this.cancel();
    },
    //选择值
    selectItem: function (value, index) {
      // var selectedVal = {}
      // console.log(value[this.currentSelectLabel])
      // for (const valueKey in value) {
      //   // this.currentSelectValue[valueKey] = value[valueKey]
      //   selectedVal[valueKey] = value[valueKey]
      // }
      // console.log(selectedVal)
      this.currentSelectValue = value[this.currentSelectLabel];
      this.currentSelectValueNeed = value[this.currentSelectNeed];
      for (var i = 0; i < this.selectBox.length; i++) {
        this.$set(this.selectBox[i], "flag", false);
      }
      this.selectBox[index].flag = true;
    },
    // 发送验证码
    sendCode: function () {
      var that = this;
      var setTime = 0;
      if (!that.isSend) {
        that.isSend = true;
        setTime = setInterval(function () {
          that.wait--;
          that.sendColor = "color:#999";
          that.codeFont = that.wait + "重新发送";
          if (that.wait == 0) {
            clearInterval(setTime);
            that.codeFont = "获取验证码";
            that.isSend = false;
            that.wait = 60;
            that.sendColor = "color:#ff5b01";
          }
        }, 1000)
      }

    }

  }
}
</script>

<style lang="scss">
// 弹框
.select-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 300000;

  .select-bg {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
  }

  .select-box {
    position: absolute;
    left: 0;
    bottom: -1000upx;
    width: 100%;
    background: #fff;
    max-height: 50%;
    // height: 0%;
    overflow: auto;

    .select-title {
      display: flex;
      justify-content: space-between;
      height: 80upx;
      background: #f5f5f5;
      line-height: 80upx;
      padding: 0 30upx;
    }

    .select-item {
      font-size: 28upx;
      color: #333;
      border-bottom: 1px solid #eee;
      height: 75upx;
      line-height: 75upx;
      padding: 0 30upx;

      i {
        display: block;
        float: right;
        border-bottom: 4upx solid #1ca032;
        border-right: 4upx solid #1ca032;
        width: 12upx;
        height: 26upx;
        transform: rotate(45deg);
        margin-top: 24.5upx;
      }
    }
  }

  @keyframes mymove {
    0% {
      max-height: 10%;
    }

    100% {
      max-height: 50%;
    }
  }

  /*Safari 和 Chrome:*/
  @-webkit-keyframes mymove {
    0% {
      max-height: 10%;
    }

    100% {
      max-height: 50%;
    }
  }
}

// 下拉icon
.select-icon {
  // display: block;
  float: right;
  border-bottom: 2upx solid #999;
  border-right: 2upx solid #999;
  width: 16upx;
  height: 16upx;
  transform: rotate(-45deg);
  margin-right: 10upx;
}

.color-orange {
  color: #ff5b01;
}

.color-999 {
  color: #999;
}

.font32 {
  font-size: 32upx;
}

.plaClass {
  color: #dbdbdb;
}

.form-container {
  padding: 0 30upx;

  .form-box {
    width: 100%;
    box-sizing: border-box;
  }

  .colorRed {
    color: red;
  }

  .img-box {
    border-bottom: 1px solid #ededed;
    padding: 30upx 0;

    .update-img-box {
      border: 1px solid #ededed;
      display: flex;

      .update-img {
        width: 140upx;
        height: 140upx;
      }
    }

    .update-img-box2 {
      overflow: hidden;
      display: flex;
    }

    .update-img-box, .update-btn-box {
      width: 140upx;
      height: 140upx;
      position: relative;
      margin-top: 20upx;
    }

    .update-img-box .close-img {
      width: 40upx;
      height: 40upx;
      position: absolute;
      right: -12upx;
      top: -16upx;
      background: #fff;
      border-radius: 50%;
    }

    img {
      width: 140upx;
      height: 140upx;
      object-fit: cover;
    }
  }

  .line-right {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;

  }

  .send-code-box {
    .send-code {
      font-size: 28upx;
      padding: 0;
      white-space: nowrap;
      // width: 60%;
      //color:#ff5b01;
      height: 90upx;
      line-height: 90upx;
      cursor: pointer;
    }
  }

  .line-left {
    display: flex;
    width: 22%;
    align-items: center;
    height: 100%;
    font-size: 28upx;
    color: #333;
    box-sizing: border-box;
  }

  .img-label {
    width: 100%;
    height: 100%;
    font-size: 28upx;
    color: #333;
    box-sizing: border-box;
  }

  .p-l14 {
    padding-left: 14upx;
  }

  .textarea-box {
    // display: flex;
    border-bottom: 1px solid #ededed;
    padding-top: 20upx;
    // align-items: center;
    textarea {
      height: 150upx;
      font-size: 28upx;
      color: #333;
      width: 100%;
      margin-top: 20upx;
    }
  }

  .line {
    margin-top: 30upx;
    height: 100upx;
    width: 100%;
    margin: 0 auto;
    border-bottom: 1px solid #ededed;
    display: flex;
    overflow: hidden;

    .input {
      padding-right: 20upx;
      height: 100%;
      width: 100%;
      text-align: left;
      font-size: 28upx;
      color: #333;
      border: none;
      overflow: hidden;
      text-overflow: ellipsis;
      outline: none;
    }
  }
}
</style>
